<template>
    <div id="app" class="auth-page">
        <div class="auth-content">
            <!-- 转圈圈 -->
            <div class="loader"></div>
            <!--<div class="loading-text">正在授权，请稍候...</div>-->
        </div>
    </div>
</template>

<script>
    /*import TopNav from "@/components/TopNav.vue";*/
    import { saveUserInfo,saveUserToken } from '@/utils/userStorage';
    import { getUserInfo } from '@/api/index.js'

    export default {
        name: 'Oauth2AuthorizePage',
        /*components: { TopNav },*/
        data() {
            return {
                token: null,
                loading: true
            };
        },
        methods: {
            async oauth2Authorize() {
                try {
                    const token = this.$route.query.token;
                    if (token) {
                        this.token = token;
                        saveUserToken(token);
                        await this.getUserInfo();
                        // 给用户一些延迟感
                        setTimeout(() => {
                            this.$router.replace('/home');
                        }, 800);
                    } else {
                        // 跳转到后端微信授权接口
                        window.location.href = 'http://192.168.1.24:9041/courseapp/oauth2/authorize';
                    }
                } catch (err) {
                    console.error('授权失败', err);
                    this.loading = false;
                } finally {
                    this.loading = false;
                }
            },
            async getUserInfo(){
                try {
                    const res = await getUserInfo()
                    let userData = res.data
                    saveUserInfo(userData);
                } catch (err) {
                    console.log(err.message);
                }
            }
        },
        mounted() {
            this.oauth2Authorize();
        }
    };
</script>

<style scoped>

    .auth-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #fff;
    }

    .loader {
        border: 5px solid #f3f3f3;     /* 灰色背景圈 */
        border-top: 5px solid #409eff; /* 蓝色进度条 */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-text {
        font-size: 14px;
        color: #666;
    }

</style>
